<template>
  <el-card
    class="box-card"
    shadow="hover"
    :body-style="{ padding: '0px 5px', height: '1615px' }"
  >
    <template #header>
      <div class="rjfl">
        <span class="rjfl-title">软件分类</span>
        <span class="rjfl-more" @click="gotoList(387 + '_0_0_0_1', $router)"
          >更多
          
        </span>
      </div>
    </template>
    <div class="type" v-for="(it, i) in data" :key="i">
      <div class="type-title">
        <span class="title" @click="gotoList(387 + '_' + it.id + '_0_0_1', $router)"> {{ it.name }}</span>
      </div>

      <div class="children">
        <span
          class="children-title"
          v-for="(jt, j) in it.thirdTypeVos"
          :key="i + '_' + j"
          @click="gotoList(387 + '_' + it.id + '_' + jt.id + '_0_1', $router)"
          >{{ jt.name }}</span
        >
      </div>
    </div>
  </el-card>
</template>

<script setup>
import { ref } from "vue";

defineProps({
  data: {
    type: Array,
    default: () => [],
  },
});

// const it = ref({
//   name: "梦想世界",
//   icon: "https://placeholder.idcd.com/?w=72&h=72&text=72x72",
//   id: "",
// });
</script>

<style lang="less" scoped>
.type {
  display: flex;
  flex-direction: column;
  margin: 10px 10px 13.6px 10px;
  .type-title {
    display: flex;
    margin-bottom: 10px;
    .title {
      cursor: pointer;
      font-size: 16px;
      font-weight: bold;
      color: #1d2127;
      //   line-height: 14px;
    }
  }

  .children {
    display: flex;
    flex-flow: row;
    flex-wrap: wrap;
    justify-content: flex-start;
    .children-title {
      display: inline-flex;
      display: flex;
      border-bottom: 0px !important;
      height: 30px;
      align-items: center;
      cursor: pointer;
      min-width: 88px;
      font-size: 14px;
      font-weight: 400;
      color: #545759;

      &:hover {
        color: @link-color;
      }
    }
  }
}

@media screen and (max-width: 1366px) {
  .children-title {
    min-width: 85px !important;
    max-width: 86px !important;
  }
}
</style>
